<template>
    <div class="cart">
        <!-- <topbar></topbar> -->
        <CartList :List="List"></CartList>
        <myfooter></myfooter>
    </div>
</template>

<script>
import topbar from "@/components/publicComponents/topbar.vue"
import CartList from "./components/CartList.vue"
import myfooter from "./components/myfooter.vue"
import { getList } from "@/api/sjAPI"
export default {
    name: 'Cart',
    components: {
        topbar,
        CartList,
        myfooter
    },
    data() {
        return {
            List: []
        };
    },

    mounted() {
        this.getData()
        this.$bus.$on("allChecked",this.changeitem)
    },

    methods: {
        changeitem(val){
            if(val){
                this.List.forEach(item=>{
                    item.isChecked = true
                    console.log(item);
                })
            }else{
                this.List.forEach(item=>{
                    item.isChecked = false
                    console.log(item);
                })
            }
            
        },
        getData() {
            getList().then(res => {
                this.List = res
                this.List.forEach(item => {
                    this.$set(item, "count", 1)
                    this.$set(item, "isDisabled", false)
                    this.$set(item, "isChecked", false)
                    this.$set(item, "totalMoney", +item.price.split(" ")[0])
                })
            })
        }
    },
};
</script>

<style lang="less" scoped>
.cart {
    width: 100%;
    height: 100%;
    // display: flex;
    // flex-direction: column;

}
</style>